<template>
	<view>
		<u-navbar title="">
			<view class="slot-wrap">
				<u-search input-align="center" :show-action="false" v-model="keyword"></u-search>
			</view>
		</u-navbar>
		<view class="content" ref="contentContainer">
			<view class="tab-container">
				<view class="tab-item" v-for="(tab, index) in list" :key="index"
					:class="{ 'active': activeTab === tab.name }" @click="handleTabClick(index)">
					{{ tab.name }}
				</view>
			</view>

		</view>
		<view class="inquire" key="inquireSections" ref="inquireSections">
			<view class="font">查询</view>
			<view class="section_back">
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>我的账户</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>明细查询</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>收支</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>持仓收益</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>持仓收益</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>持仓收益</view>
				</view>
			</view>
		</view>
		<view class="transfer" key="transferSections" ref="transferSections">
			<view class="font">转账支付</view>
			<view class="section_back">
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>转账</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>跨境电汇</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>数字人名币</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>支付</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>收付款</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>绑定他行</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>一键绑卡</view>
				</view>
			</view>
		</view>
		<view class="wealth" key="wealthSections" ref="wealthSections">
			<view class="font">财富</view>
			<view class="section_back">
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>理财产品</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>跨境理财通</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>基金</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>保险</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>债市宝</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>持仓收益</view>
				</view>
			</view>
		</view>
		<view class="deposit" key="depositSections" ref="depositSections">
			<view class="font">存款</view>
			<view class="section_back">
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>存款</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>银利多</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>定活互转</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>双利丰</view>
				</view>

			</view>
		</view>
		<view class="loans" key="loansSections" ref="loansSections">
			<view class="font">贷款</view>
			<view class="section_back">
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>贷款</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>网捷贷</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>房产金融</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>持仓收益</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>持仓收益</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>持仓收益</view>
				</view>
			</view>
		</view>
		<view class="card" key="cardSections" ref="cardSections">
			<view class="font">信用卡</view>
			<view class="section_back">
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>信用卡</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>还款</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>现金分期</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>现金转出</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>进度查询</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>卡片商城</view>
				</view>
			</view>
		</view>
		<view class="private" key="privateSections" ref="privateSections">
			<view class="font">私人银行</view>
			<view class="section_back">
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>私人银行</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>私行代销</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>尊享权益</view>
				</view>
			</view>
		</view>
		<view class="life" key="lifeSections" ref="lifeSections">
			<view class="font">生活</view>
			<view class="section_back">
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>生活缴费</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>手机充值</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>政务民生</view>
				</view>
			</view>
		</view>
		<view class="assistant" key="assistantSections" ref="assistantSections">
			<view class="font">助手</view>
			<view class="section_back">
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>扫一扫</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>存款证明</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>流水打印</view>
				</view>
			</view>
		</view>
		<view class="feature" key="featureSections" ref="featureSections">
			<view class="font">网点/特色</view>
			<view class="section_back">
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>网点服务</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>网点查询</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>纪念币预约</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>无卡取款</view>
				</view>
				<view class="section">
					<image src="../../static/img/macard.png" mode=""></image>
					<view>开卡预填单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list: [{
						name: '查询'
					},
					{
						name: '转账支付'
					},
					{
						name: '财富'
					},
					{
						name: '存款'
					},
					{
						name: '贷款'
					},
					{
						name: '信用卡'
					},
					{
						name: '私人银行'
					},
					{
						name: '生活'
					},
					{
						name: '助手'
					},
					{
						name: '网点'
					},
				],
				activeTab: '查询', // 初始化选中的选项
			};
		},
		mounted() {
			// 在 mounted 钩子中设置 $refs
			this.$refs.contentContainer = this.$refs.contentContainer || null;
		},
		methods: {
			handleTabClick(index) {
				this.activeTab = this.list[index].name;

				// 获取被点击的选项卡对应的内容标签
				const refName = `${this.list[index].name.toLowerCase()}Sections`;
				console.log(refName);
				this.$nextTick(() => {
					const contentElement = this.$refs[refName];
					console.log(this.$refs[refName]);
					// 进行滚动操作等
					if (contentElement) {
						console.log(222);
						// 使用 uni.createSelectorQuery 获取选项卡内容标签的位置信息
						uni.createSelectorQuery()
							.in(this)
							.select('.content')
							.scrollOffset()
							.select('.tab-container')
							.boundingClientRect()
							.exec((res) => {
								const contentTop = res[0].scrollTop; // 获取内容容器的当前滚动位置
								const tabContainerHeight = res[2].height; // 获取选项卡容器的高度

								// 计算目标滚动位置
								const targetScrollTop = contentTop + contentElement.offsetTop -
									tabContainerHeight;

								// 使用 uni.pageScrollTo 方法滚动到目标位置
								uni.pageScrollTo({
									scrollTop: targetScrollTop,
									duration: 300, // 滚动动画的持续时间，单位为毫秒
								});
							});
							// console.log(111);
					}
				});
			},
		},


	};
</script>

<style scoped lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}

	.tab-container {
		display: flex;
		position: fixed;
		// top: 120rpx; /* 调整选项卡距离顶部的距离 */
		width: 100%;
		background-color: #f5f5f5;
		z-index: 1;
		/* 确保选项卡在最上层 */
		// overflow-x: scroll;
		white-space: nowrap;

	}

	.tab-item.active {
		background-color: #fff;
		color: #ff0000;
		/* 选中字体颜色 */
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 20rpx;
		cursor: pointer;
		transition: background-color 0.3s;
		// padding:0 20rpx;
	}

	.active {
		background-color: #fff;
	}

	.inquire {
		width: 100%;
		height: 300rpx;
		box-sizing: border-box;
		// margin-top: 40rpx;
		// background-color: #ff0000;
		margin-top: 70rpx;

	}

	.font {
		margin: 20rpx 0 0 20rpx;
		font-size: 34rpx;
		font-weight: 600;
	}

	.section {
		margin-top: 16rpx;
		width: 180rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
	}

	.section_back {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.section image {
		width: 50rpx;
		height: 50rpx;
	}
</style>